import React,{useState, useEffect} from 'react'

import { CloseCircleOutlined } from '@ant-design/icons';
import Apply from './classifyCom/apply'
import Vote from './classifyCom/vote'

export default function ActClassify({applyForm, getTags, voteForm, isSignUp1, isVote1, requiredEntryForms, voteWay }) {
  const [isSignUp, setIsSignUp] = useState(0)
  const [isVote, setIsVote] = useState(0)
  const [tabs,setTabs] = useState([
    {key: 0, tabName: '报名'},
    {key: 1, tabName: '投票'},
  ])
  const changeKeys = (value) => {
    if(value == 0){
      setIsSignUp(1)
    }
    if(value == 1){
      setIsVote(1)
    }
  }
  const openItem = () => {
    if(isSignUp1){
      setIsSignUp(1)
    }
    if(isVote1){
      setIsVote(1)
    }
  }
  useEffect(()=>{
    openItem()
  }, [])
  const delHandler = (value) => {
    const newTabs = tabs.filter(item => item.key !== value)
    setTabs([...newTabs])
  }
  return (
    <>
      <div style={{fontWeight: 700, fontSize: 18}}>
        请选择您想要创建的活动
        <span style={{fontWeight: 400, fontSize: 14, paddingLeft: 10}}>
          (可多选)
        </span>
      </div>
      <section style={{ marginTop: 15, display: 'flex'}}>
          {
            tabs.map(item => (
              <div key={item.key}
                  onClick={() => changeKeys(item.key)}
                  style={{
                    position: 'relative',
                    width: 80,
                    height: 40,
                    backgroundColor: '#1a257a',
                    color: '#fff',
                    borderRadius: 5,
                    marginRight: 10,
                    textAlign: 'center',
                    lineHeight: '40px',
                    cursor: 'pointer',
                  }}
              >
                <span>{item.tabName}</span>
                <CloseCircleOutlined onClick={() => delHandler(item.key)}
                    style={{
                    position: 'absolute',
                    top: -4,
                    right: -4,
                    width: 16,
                    height: 16,
                    fontSize: 16,
                    backgroundColor: '#Fff',
                    borderRadius: 16,
                    color: '#000',
                    cursor: 'pointer',
                  }}
                />
              </div>
            ))
          }
      </section>
        {
          isSignUp
              ? <Apply applyForm={applyForm}
                      getTags={getTags}
                      requiredEntryForms={requiredEntryForms}
                />
             : ''}
        {
          isVote
              ? <Vote
                      voteForm={voteForm}
                      voteWay={voteWay}
                />
              : ''}
    </>
  )
}
